<template>
	<div>
		<picker mode="multiSelector" range-key="name" @change="handleArea" @columnchange="bindPickerChange"
			:value="defaultBussiness" :range="items">
			<text>{{ industryString }}</text>
		</picker>
	</div>
</template>

<script>
	import industry from "@/common/json/industry.json";
	export default {
		props: {
			isType: {
				type: Number,
				default: 11,
			},
			bussinessString: {
				type: String,
				default: "",
			},
			bussinessIndex: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				defaultBussiness: [0, 0],
				industryLevelOne: [],
				industryLevelTwo: [],
				items: [],
				industryString: "请选择行业",
				industryCode: {},
			};
		},
		watch: {
			isType(newValue, oldValue) {
				console.log('new', newValue)
				this.industryLevelOne = [];
				this.industryLevelTwo = [];
				this.industryString = '请选择行业';
				this.defaultBussiness = [0, 0];
				switch (newValue) {
					case 11:
						industry.individual.forEach((e) => {
							this.industryLevelOne.push({
								name: e.name,
								children: e.children,
							});
						});
						this.industryLevelTwo = this.industryLevelOne.find(
							(a) => a.name == this.industryLevelOne[0].name
						).children;
						this.items = [this.industryLevelOne, this.industryLevelTwo];
						console.log('this.items', this.items)
						break;
					case 12:
						industry.company.forEach((e) => {
							this.industryLevelOne.push({
								name: e.name,
								children: e.children,
							});
						});
						this.industryLevelTwo = this.industryLevelOne.find(
							(a) => a.name == this.industryLevelOne[0].name
						).children;
						this.items = [this.industryLevelOne, this.industryLevelTwo];
						console.log('this.items', this.items)
						break;
					default:
						break;
				}
			},
		},
		created() {
			switch (this.isType) {
				case 11:
					industry.individual.forEach((e) => {
						this.industryLevelOne.push({
							name: e.name,
							children: e.children,
						});
					});
					this.industryLevelTwo = this.industryLevelOne.find(
						(a) => a.name == this.industryLevelOne[0].name
					).children;
					this.items = [this.industryLevelOne, this.industryLevelTwo];
					break;
				case 12:
					industry.company.forEach((e) => {
						this.industryLevelOne.push({
							name: e.name,
							children: e.children,
						});
					});
					this.industryLevelTwo = this.industryLevelOne.find(
						(a) => a.name == this.industryLevelOne[0].name
					).children;
					this.items = [this.industryLevelOne, this.industryLevelTwo];
					break;
				default:
					break;
			}
		},
		mounted() {
			if (this.bussinessString) {
				this.industryString = this.bussinessString;
				this.defaultBussiness = this.bussinessIndex.split(",").map(Number);
			}
		},
		methods: {
			handleArea(e) {
				this.industryString = `${this.industryLevelOne[e.detail.value[0]].name}-${
        this.industryLevelTwo[e.detail.value[1]].name
      }`;
				this.industryCode = {
					name: `${this.industryLevelOne[e.detail.value[0]].name}-${
          this.industryLevelTwo[e.detail.value[1]].name
        }`,
					code: this.industryLevelTwo[e.detail.value[1]].code,
				};
				this.$emit(
					"getBussiness",
					this.industryCode,
					this.defaultBussiness,
					this.industryString
				);
			},
			bindPickerChange(e) {
				let col = e.detail.column;
				let row = e.detail.value;
				this.defaultBussiness[col] = row;
				switch (col) {
					case 0:
						this.industryLevelTwo = this.industryLevelOne.find(
							(a) => a.name == this.industryLevelOne[e.detail.value].name
						).children;
						this.items = [this.industryLevelOne, this.industryLevelTwo];
						break;
					default:
						break;
				}
			},
		},
	};
</script>

<style scoped></style>